<template>
	<div>
		<blue-button text="新增" :clickEvent="addClickEvent" class="add-btn" style="text-align:left">
		</blue-button>
		<table class="sv-table">
			<tr class="table-th">
				<th>类目名称</th>
				<th>创建日期</th>
				<th>状态</th>
				<th>操作</th>
			</tr>
			<tr class="table-tr" v-for="(item, index) in getDataArray" :key="index">
				<td>{{item.name}}</td>
				<td>{{item.createTime}}</td>
				<td><span :class="[item.state == '1' ? 'banner-qiyong' : 'banner-tingyong']">{{item.state == "1" ? "已启用" : "已停用"}}</span></td>
				<td class="handle-button" ref="handleButton">
					<gray-button text="编辑" :clickEvent="editClickEvent.bind(this, index)"></gray-button>
					<gray-button :text="item.state == '1' ? '停用' : '启用'" :clickEvent="enableClickEvent.bind(this, item.id, index, item.state)"></gray-button>
					<gray-button text="删除" :disabled="item.state == '1'" :clickEvent="deleteClickEvent.bind(this, item.id, item.state)"></gray-button>
				</td>
			</tr>
		</table>
		<!--样式设置-->
		<div style="margin-top: 10px;">
			<blue-button text="导航样式设置" :clickEvent="StyleClickEvent" class="add-btn" style="text-align:left"></blue-button>
		</div>
		<edit-model ref="StyleModel" title="导航样式设置">
			<div class="slot-banner" slot="main">
				<div>
					<span class="eidt-slot-title">导航背景颜色设置：</span>
					<input type="color" v-model="tabbgcolor" style="border: none;height: 30px;padding: 0px;" />
				</div>
				<div>
					<span class="eidt-slot-title">导航文字颜色设置：</span>
					<input type="color" v-model="tabtextcolor" style="border: none;height: 30px;padding: 0px;" />
				</div>
				<div>
					<span class="eidt-slot-title">选中TAB背景颜色设置：</span>
					<input type="color" v-model="clicktabbgcolor" style="border: none;height: 30px;padding: 0px;" />
				</div>
				<div>
					<span class="eidt-slot-title">选中TAB文字颜色设置：</span>
					<input type="color" v-model="clicktabtextcolor" style="border: none;height: 30px;padding: 0px;" />
				</div>
				<div class="fabu-box">
					<blue-button text="确认" :clickEvent="stylesubmitClickEvent"></blue-button>
				</div>
			</div>
		</edit-model>
		<!-- 编辑或新增的弹框 -->
		<edit-model ref="editModel" title="运营类目">
			<div class="slot-banner" slot="main">
				<!-- 运营类目名称 -->
				<div>
					<p class="eidt-slot-title">类目名称</p>
					<input type="text" v-model="itemName" />
				</div>
				<div class="fabu-box">
					<blue-button text="确认" :clickEvent="submitClickEvent"></blue-button>
				</div>
			</div>
			<div slot="slide">
			</div>
		</edit-model>
		<m-toast ref="toast"></m-toast>
		<m-dialog ref="dialog"></m-dialog>
	</div>
</template>

<script>
	import BlueButton from "../../edit-components/BlueButton";
	import GrayButton from "../../edit-components/GrayButton";
	import EditModel from "../../edit-components/EditModel";
	import PagePath from "../../edit-components/PagePath";
	import { mapGetters } from "vuex";
	import Toast from "../../edit-components/Toast";
	import Dialog from "../../edit-components/Dialog";
	import getPageName from "../../utils/gw/getPageName";
	//引用起名规则的文件
	import * as prefix from "../../config/page-name/gw/virtualpagename-prefix.js";
	import getId from "../../utils/initComponentsId";
	import {initComponentsList} from "../../helper/drag-plugin/initComponents";
	import {TabHeaderColor} from "../../config/stystem-params";
	export default {
		props: {
			/**
			 * componentName: 组件名称, id: 组件id, part: 当前组件所处的部分（header/main/footer）
			 */
			config: {
				type: Object,
				default: () => {}
			},
		},
		data() {
			return {
				msg: '这是测试首页',
				type: {},
				itemName: "",
				editIndex: -1,
				tabbgcolor: TabHeaderColor.tabbgcolor,
				tabtextcolor: TabHeaderColor.tabtextcolor,
				clicktabbgcolor: TabHeaderColor.clicktabbgcolor,
				clicktabtextcolor: TabHeaderColor.clicktabtextcolor
			}
		},
		computed: {
			...mapGetters("gw", [
				"getEditComponentsList",
				'getRealComponentsList'
			]),
			componentName() {
				return this.config.componentName;
			},
			//这个值对应的是relGroup;
			componentId() {
				return this.config.id;
			},
			getDataArray() {
				return this.currentVDO.config ? this.currentVDO.config.pages || [] : [];
			},
			currentVDO() {
				return this.getCurrentVDONew(this.componentId, this.componentPart) || {};
			},
			componentConfig() {
				return this.currentVDO.config || {};
			},
			pageName() {
				return getPageName();
			},
			//获取当前getRealComponentsList的main部分
			mainList() {
				/*return getPageTree(this, this.pagevuename).config;*/
				return this.$store.getters['gw/getRealComponentsList'][0][1];
			},
			pageConfig2() {
				/*return getPageTree(this, this.pagevuename).config;*/
				return this.$store.getters['gw/getRealComponentsList'][1]
			},
			componentPart() {
				return this.config.part;
			}
		},
		methods: {
			//新增按钮的事件，调出模态框
			addClickEvent() {
				this.handleType = "add";
				this.$refs.editModel.showCover();
				this.itemName = "";
			},
			//编辑按钮的事件
			editClickEvent(index) {
				//this.itemName = getPageTree(this, this.pageName).header.TabHead[0].config.pages[index].name;
				this.itemName = this.currentVDO.config.pages[index].name
				this.editIndex = index;
				this.handleType = "edit";
				this.$refs.editModel.showCover();
			},
			//根据id获取对应的运营类目item
			getClassifyItemById(id) {
				let item, index;
				let pages = this.currentVDO.config.pages;
				for(let i = 0; i < pages.length; i++) {
					if(pages[i].id === id) {
						index = i;
						item = pages[i];
						break;
					}
				}
				return {
					item,
					index
				};
			},
			//启用启用禁用的事件
			enableClickEvent(id, index, state) {
				let item = this.getClassifyItemById(id).item;
				let obj = this.currentVDO.config;
				obj.pages[index].state = state === "1" ? "0" : "1";
				this.setEditConfigNew(this.componentId, obj, this.componentPart);
				//同时隐藏真实组件
				//let domTree2 = this.$store.getters.getDomTree[this.pageName];
				for(let comItem of this.mainList) {
					//找到对应的真实组件
					if(item.comId === comItem.id) {
						comItem.config = {
							state: state === "1" ? "0" : "1"
						}
						initComponentsList();
						break;
					}
				}
			},
			//删除按钮的事件
			deleteClickEvent(id, status) {
				if(status == 1) {
					return
				}
				this.infoDialog("确定要删除该运营类目吗？", () => {
					//删除对应id的运营类目
					let pages = this.currentVDO.config.pages;
					let itemObj = this.getClassifyItemById(id);//获取点击的运营类目
					let itemIndex = itemObj.index;//获取该运营类目的下标值
					let comId = itemObj.item.comId;//获取该运营类目对应的真实组件的id
					pages.splice(itemIndex, 1);//删除运营类目
					//删除对应的真实组件
					let list = window.manifest[this.pageName].main;
					for(let i = 0; i < this.mainList.length; i++) {
						
						if(this.mainList[i].id === comId) {
							let removeIndex = i;
							list.removeAt(removeIndex);
							initComponentsList();
							break;
						}
					}
				});

			},
			//配置提示框的通用方法
			infoDialog(msg, confirmFn) {
				this.$refs.dialog.dialog({
					msg,
					confirmFn
				});
			},
			//模态框中提交确定按钮的事件
			//处理两个流程
			//1：往tabhead的config添加一个运营类目
			//2：向domTree中添加一个对应的真实组件
			//引用/src/config/page-name/gw/virtualpagename-prefix文件
			//使用该前缀+index值的命名规则
			submitClickEvent() {
				if(!this.itemName) {
					this.$refs.toast.toast("类目标题不能为空");
					return;
				}
				//进行编辑操作
				if(this.handleType === "edit") {
					//let obj = getPageTree(this, this.pageName).header.TabHead[0].config;
					let obj = this.currentVDO.config
					obj.pages[this.editIndex] = {
						...obj.pages[this.editIndex],
						name: this.itemName
					}
					this.setEditConfigNew(this.componentId, obj, this.componentPart);
					//关闭editmodel
					this.$refs.editModel.hideCover();
					return;
				}
				//保存config
				let obj = this.currentVDO;
				if(!obj.config) {
					obj.config = {};
				}
				if(!obj.config.pages) {
					obj.config.pages = [];
				}
				//let domTree = this.$store.getters.getDomTree[this.pageName];
				let index = this.getRealComponentsList[0][1].length;
				let component = {
					id: getId(),
					componentName: "NewZone",
					index: index,
					config: {
						state: "1"
					}
				}
				//添加对应组件到对应页面
				let list = window.manifest[this.pageName].main;
				list.push(component);//更改manifest
				initComponentsList();//更新realComponentsList
				//添加类目item
				let page = {
					id: "th" + parseInt(Math.random() * 100000),
					name: this.itemName,
					createTime: this.timeFormatFn(new Date().getTime()),
					state: "1", //启用状态
					comId: component.id
				}
				obj.config.pages.push(page);
				//将改变后的config对象保存到对应的Object
				this.setEditConfigNew(this.componentId, obj.config, this.componentPart);
				//关闭editmodel
				this.$refs.editModel.hideCover();
			},
			//自动切换到新的运营类目页面
			changePageShown(index) {
				this.$store.commit("cjy/CHANGE_CLASSIFY_INDEX", index);
			},
			//将时间戳转换时间
			timeFormatFn(time) {
				let date = new Date(time);
				return `${date.getFullYear()}-${date.getMonth() + 1 > 9 ? date.getMonth() + 1:'0' + (date.getMonth() + 1)}-${date.getDate()> 9 ? date.getDate() : '0' + date.getDate()}  ${date.getHours() > 9 ? date.getHours() : '0' + date.getHours()}:${date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes()}`;
			},
			//样式设置
			StyleClickEvent() {
				//获取config对象中的颜色
				this.getBgcolordata()
				this.$refs.StyleModel.showCover();
			},
			stylesubmitClickEvent() {
				//校验
				let re = /^#[0-9a-fA-F]{3,6}$/;
				if(this.tabbgcolor && !re.test(this.tabbgcolor) || this.tabtextcolor && !re.test(this.tabtextcolor) || this.clicktabbgcolor && !re.test(this.clicktabbgcolor) || this.clicktabtextcolor && !re.test(this.clicktabtextcolor)) {
					this.$refs.toast.toast("请输入带#号的16进制颜色");
					return;
				}
				console.log("拿到颜色值");
				//存值
				// this.setPageConfigNew({
				// 	tabbgcolor: this.tabbgcolor,
				// 	tabtextcolor: this.tabtextcolor,
				// 	clicktabbgcolor: this.clicktabbgcolor,
				// 	clicktabtextcolor: this.clicktabtextcolor,
				// });
				//存到对应组件的config对象里
				let colorConfig = {
					tabbgcolor: this.tabbgcolor,
					tabtextcolor: this.tabtextcolor,
					clicktabbgcolor: this.clicktabbgcolor,
					clicktabtextcolor: this.clicktabtextcolor,
				};
				this.setEditConfigNew(this.componentId, colorConfig, this.componentPart);
				this.$refs.StyleModel.hideCover();
				// initComponentsList();
				// PSEvent.trigger("TabStyleUpdate");
			},
			//回显获取设置的颜色
			getBgcolordata() {
				// console.log("this.currentVDO", this.currentVDO);
				this.tabbgcolor = this.componentConfig.tabbgcolor || TabHeaderColor.tabbgcolor;
				this.tabtextcolor = this.componentConfig.tabtextcolor || TabHeaderColor.tabtextcolor;
				this.clicktabbgcolor = this.componentConfig.clicktabbgcolor || TabHeaderColor.clicktabbgcolor;
				this.clicktabtextcolor = this.componentConfig.clicktabtextcolor || TabHeaderColor.clicktabtextcolor;
			},

		},
		filters: {
			timeFormat(time) {
				if(time) {
					let date = new Date(time);
					return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()> 9 ? date.getDate() : '0' + date.getDate()}  ${date.getHours() > 9 ? date.getHours() : '0' + date.getHours()}:${date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes()}`;
				} else {
					return "无"
				}
			}
		},
		created() {
			
		},
		mounted() {
		},
		components: {
			"blue-button": BlueButton,
			"gray-button": GrayButton,
			"edit-model": EditModel,
			"page-path": PagePath,
			"m-toast": Toast,
			"m-dialog": Dialog,
		},

	}
</script>

<style scoped>
	.add-btn {
		margin-bottom: 10px;
	}
	
	.edit-box {
		height: 500px;
		width: 100%;
		overflow: scroll;
	}
	
	.banner-qiyong {
		background-color: #2980b9;
		color: #fff;
		font-size: 12px;
		border-radius: 3px;
		padding: 1px;
	}
	
	.banner-tingyong {
		background-color: #e74c3c;
		color: #fff;
		font-size: 12px;
		border-radius: 3px;
		padding: 1px;
	}
	
	#app .slot-banner .eidt-slot-title {
		width: 160px;
	}
	
	.fabu-box {
		display: flex;
		justify-content: center;
		margin-top: 30px;
	}
</style>